<template>
  <view class="Field-Cell px-4 bg-white h-104" :style="boxStyle">
    <view border="base b-2 b-solid" class="flex h-full items-center">
      <view class="mr-2 text-sm font-medium text-#333" :style="{ width: `${props.labelWidth}rpx` }">
        {{ props.label }}
      </view>
      <view class="flex flex-1 h-full items-center" @click="onEdit">
        <view v-if="props.type === 'img'" class="flex w-full justify-end">
          <ImageUpload :model-value="props.modelValue" :width="80" :height="80" @change="onChange">
            <text class="text-sm text-#666">
              请选择图片
            </text>
          </ImageUpload>
        </view>

        <view v-else-if="!editing || props.type === 'date' || props.dict" class="text-sm text-right w-full">
          <text v-if="value" class="text-#666">
            {{ value }}
          </text>
          <text v-else class="text-xs text-#999">
            {{ props.placeholder }}
          </text>
        </view>

        <u-input v-else :model-value="props.modelValue" :focus="editing" @input="onChange" @blur="onCancel" />
      </view>
      <i v-if="!props.hideCaret" class="i-ph-caret-right pl-2.5 block" :class="props.disabled ? 'text-transparent' : 'text-#999'" />
    </view>

    <u-calendar v-if="props.type === 'date'" v-model="editing" mode="date" @change="onChange($event.result)" />
    <u-picker v-else-if="props.dict" v-model="editing" :title="props.label" mode="selector" :default-selector="dictDefaultSelector" :range="dictValue.map((it) => it.name)" @confirm="onChange(dictValue[$event[0]].id)" />
  </view>
</template>

<script setup lang="ts">

import type { CSSProperties } from 'vue'
import { ref } from 'vue'
import UInput from '@/uni_modules/vk-uview-ui/components/u-input/u-input.vue'
import UCalendar from '@/uni_modules/vk-uview-ui/components/u-calendar/u-calendar.vue'
import useDict from '@/hooks/useDict'
import UPicker from '@/uni_modules/vk-uview-ui/components/u-picker/u-picker.vue'
import UUpload from '@/uni_modules/vk-uview-ui/components/u-upload/u-upload.vue'
import ImageUpload from '@/components/ImageUpload/ImageUpload.vue'

const props = withDefaults(defineProps<{
  modelValue: string | null
  label: string
  labelWidth?: number
  type?: 'text' | 'date' | 'img'
  disabled?: boolean
  dict?: string,
  placeholder?: string
  hideCaret?: boolean
  boxStyle?: CSSProperties
}>(), {
  type: 'text',
  disabled: false,
  hideCaret: false,
  labelWidth: 170,
})
const emits = defineEmits<{
  (event: 'update:modelValue', value: string): void
  (event: 'change', value: string): void
}>()

const dict = useDict()

const editing = ref(false)
const dictValue = computed(() => (props.dict ? dict.get(props.dict) : []))
const dictDefaultSelector = computed(() => {
  if (props.modelValue === null || props.modelValue === undefined) {
    return [0]
  }
  const index = dictValue.value.map((it) => String(it.id)).indexOf(String(props.modelValue))
  return index === -1 ? [0] : [index]
})
const uploadRef = ref<typeof UUpload['methods']>()
const value = computed(() => (props.dict ? dict.getName(props.dict, props.modelValue) : props.modelValue))
function onEdit() {
  if (props.disabled) {
    return
  }
  editing.value = true
  if (props.type === 'img') {
    uploadRef.value?.upload()
  }
}

function onChange(value: string) {
  emits('update:modelValue', value)
  emits('change', value)
}

function onCancel() {
  editing.value = false
}

</script>

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style scoped lang="scss">
.Field-Cell {
  ::v-deep(.u-upload) {
    .u-preview-wrap, .u-preview-image {
      border-radius: 50% !important;
    }
  }
}

</style>
